<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通达快递 TDCargo-通行天下,使命必达</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    .grid-parent {
        width: 530px;
        border-top: 6px solid #000;
        border-left: 8px solid #000;
        border-right: 8px solid #000;
        border-bottom: 7px solid #000;
        padding: 0 10px 15px
    }

    ul li {
        display: inline-block;
        margin-bottom: 5px;
    }
</style>
<body style="overflow: auto;">
<div class="layui-fluid" style="padding: 15px;">
    <ul id="express-print-container"></ul>
</div>

<script type="text/html" id="express-print-tmp">
    {{#  layui.each(d, function(index, item){ }}
    <li>
        <div class="grid-parent">
            <div class="layui-row" style="padding: 15px; height: auto; line-height: 100%;">
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6" style="text-align: center;">
                    <img src="/src/style/res/zhongtongguoji.jpg" style="width: 90%; height: auto;">
                </div>
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                    <img src="/src/style/res/tongshangjibian.jpg" style="width: 90%; height: auto;">
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div style="border: 4px solid #000; height: 75px; text-align: center; line-height: 75px;">
                        <h1 style="font-size: 35px;">{{item.paintMarker}}</h1>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2">
                    <div style="border: 4px solid #000; height: 50px; text-align: center; line-height: 50px; border-top: none; border-right: none;">
                        <h1 style="font-size: 30px">集</h1>
                    </div>
                </div>
                <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-lg5">
                    <div style="border: 4px solid #000; height: 50px; text-align: left; line-height: 50px; border-top: none; border-right: none; padding-left: 10px;">
                        <h1 style="font-size: 30px">{{item.paintMarkerEn}}</h1>
                    </div>
                </div>
                <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-lg5">
                    <div style="border: 4px solid #000; height: 50px; text-align: right; line-height: 50px;border-top: none; border-left: none; padding-right: 10px;">
                        <h1 style="font-size: 30px">1/1</h1>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-lg5">
                    <div style="border: 4px solid #000; height: 125px; text-align: left; border-top: none; border-right: none; padding-left: 10px;">
                        <h1 style="font-size: 30px">快递包裹</h1>
                    </div>
                </div>
                <div class="layui-col-xs7 layui-col-sm7 layui-col-md7 layui-col-lg7">
                    <div style="border: 4px solid #000; height: 125px; text-align: center; border-top: none; border-left: none; padding-right: 10px;">
                        <div style="padding-top: 5px; text-align: unset;">
                            <img id="express-print1-{{item.waybillNo}}"/>
                        </div>
                        <span style="font-size: 14px; font-weight: bold;">{{item.expressNo}}</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 layui-col-lg9">
                    <div style="border: 4px solid #000; height: 60px; text-align: left; border-top: none; border-right: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">寄件方：TD CARGO Vancouver  7783089998</span><br>
                        <span style="font-size: 14px; font-weight: bold;">#1140-4871 Shell Rd Richmond, BC V6X 3Z6</span>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                    <div style="border: 4px solid #000; height: 60px; text-align: center; border-top: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">始发地</span><br>
                        <span style="font-size: 14px; font-weight: bold;">温哥华</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 layui-col-lg9">
                    <div style="border: 4px solid #000; height: 60px; text-align: left; border-top: none; border-right: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">收件方：{{item.receiverName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="font-size: 14px; font-weight: bold;">{{item.receiverTelphone}}</span><br>
                        <span style="font-size: 14px; font-weight: bold;">{{item.receiverProvince}}{{item.receiverCity}}{{item.receiverAddr}}</span>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                    <div style="border: 4px solid #000; height: 60px; text-align: center; border-top: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">目的地</span><br>
                        <span style="font-size: 14px; font-weight: bold;">{{item.receiverProvince}}{{item.receiverCity}}</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div style="border: 4px solid #000; height: 50px; line-height: 50px; text-align: center; border-top: none;">
                        <span style="font-size: 30px;">收件局：大连市    已验视</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-lg5">
                    <div style="border: 4px solid #000; height: 40px; line-height: 40px; text-align: left; border-top: none; border-right: none; padding-left: 10px;">
                        <span style="font-size: 20px;">收件方签名：</span>
                    </div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                    <div style="border: 4px solid #000; height: 40px; line-height: 40px; text-align: center; border-top: none; border-left: none; border-right: none;">
                        <span style="font-size: 20px;">签收时间：</span>
                    </div>
                </div>
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 layui-col-lg4">
                    <div style="border: 4px solid #000; height: 40px; line-height: 40px; text-align: center; border-top: none; border-left: none;">
                        <span style="font-size: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-col-lg5">
                    <div style="border: 4px solid #000; height: 110px; text-align: left; border-top: none; border-right: none; padding-left: 10px;">
                        <h1 style="font-size: 30px">快递包裹</h1>
                    </div>
                </div>
                <div class="layui-col-xs7 layui-col-sm7 layui-col-md7 layui-col-lg7">
                    <div style="border: 4px solid #000; height: 110px; text-align: center; border-top: none; border-left: none; padding-right: 10px;">
                        <div style="padding-top: 5px;">
                            <img id="express-print2-{{item.waybillNo}}"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div style="border: 4px solid #000; height: 60px; text-align: left; border-top: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">寄件方：TD CARGO Vancouver  7783089998</span><br>
                        <span style="font-size: 14px; font-weight: bold;">#1140-4871 Shell Rd Richmond, BC V6X 3Z6</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div style="border: 4px solid #000; height: 60px; text-align: left; border-top: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">收件方：{{item.receiverName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="font-size: 14px; font-weight: bold;">{{item.receiverTelphone}}</span><br>
                        <span style="font-size: 14px; font-weight: bold;">{{item.receiverProvince}}{{item.receiverCity}}{{item.receiverAddr}}</span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div style="border: 4px solid #000; height: 60px; text-align: left; border-top: none; padding: 10px 10px 0 10px;">
                        <span id="goods-list-{{item.waybillNo}}" style="font-size: 14px; font-weight: bold;"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 layui-col-lg9">
                    <div style="border: 4px solid #000; height: 30px; text-align: left; border-top: none; border-right: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 14px; font-weight: bold;">备注：{{item.expressNo}}</span>
					</div>
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
 					<div style="border: 4px solid #000; height: 30px; text-align: right; border-top: none; border-left: none; padding: 10px 10px 0 10px;">
                        <span style="font-size: 25px; font-weight: bold;">汽运</span>
					</div>
                </div>
            </div>
        </div>
    </li>
    {{# }); }}
</script>

<script src="/layui/layui.js"></script>
<script src="/src/lib/other/JsBarcode.code128.min.js"></script>
<script>

</script>
<script>
    var $ = layui.$;
    layui.config({
        base: '/src/',
        version: new Date().getTime()
    }).extend({setter: "config", admin: "lib/admin", view: "lib/view"})
        .define(['setter', 'admin', 'laytpl', 'layer'], function () {
            var $ = layui.$,
                layer = layui.layer,
                admin = layui.admin,
                laytpl = layui.laytpl;

            function getRequestParam(param) {
                var requestString = location.search;
                var reg = new RegExp("(?:\\?|&)" + param + "=(.*?)(?:&|$)");
                if (reg.test(requestString)) {
                    return decodeURIComponent(RegExp.$1);
                } else {
                    return '';
                }
            }

            admin.req({
                url: "/bil/listBilExpressByIds",
                data: {"ids": getRequestParam("ids")},
                beforeSend: function () {
                    layer.load(2, {time: 100 * 1000});
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                done: function (res) {
                    var isValid = true;
                    $.each(res.data.expressList, function (index, item) {
                        if (!item.expressNo) {
                            isValid = false;
                        }
                    });
                    if (!isValid) {
                        layer.msg("只能打印有快递号的数据", {icon: 5, time: 1500});
                        return;
                    }

                    var tmp = $("#express-print-tmp").html();
                    laytpl(tmp).render(res.data.expressList, function (html) {
                        $("#express-print-container").append(html);
                    });

                    $.each(res.data.expressList, function (index, item) {
                        JsBarcode("#express-print1-" + item.waybillNo, item.expressNo, {
                            displayValue: false,
                            fontSize: 20,
                            height: 75
                        });
                        JsBarcode("#express-print2-" + item.waybillNo, item.expressNo, {
                            displayValue: false,
                            fontSize: 20,
                            height: 75
                        });
                    });

                    $.each(res.data.goodsList, function (index, item) {
                        $("#goods-list-" + item.waybillNo).append(item.brand + "&nbsp;" + item.name + ", ");
                    });

                    $("body").off("keydown").on("keydown", function (e) {
                        var nextCode = window.event ? window.event.keyCode : e.which;
                        if (nextCode === 32) {// 监听空格
                            layer.open({
                                title: '在线调试',
                                content: '请确认是否已经打印成功？确定之后运单将改为快件中心已揽收且不可更改',
                                btn: ['确定', '取消'],
                                yes: function (index) {
                                    layer.close(index);
                                    updateBilExpressState(res.data.expressList);
                                },
                                cancel: function (index) {
                                    layer.close(index);
                                }
                            });
                        } else if(nextCode === 	80) {
                            window.print();
                        } else if(nextCode === 	13){
                            layer.closeAll();
                            updateBilExpressState(res.data.expressList);
                        }
                    });
                }
            });

            function updateBilExpressState(expressList) {
                var waybillNos = "";
                $.each(expressList, function (index, item) {
                    waybillNos = waybillNos + "," + item.waybillNo;
                });

                waybillNos = waybillNos.substring(1);
                var data = {"waybillNos": waybillNos, "state": 3};
                admin.req({
                    url: "/bil/batchUpdateBilExpressState",
                    data: data,
                    done: function (res) {
                        layer.msg("运单状态更改成功", {icon: 6, time: 1500}, function() {
                            window.close();
                        });
                    }
                });
            }
        });
</script>
</body>
</html>